html,
body {
  height: 100%;
}

*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #1b242f;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 4px;
  box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.062745098);
  overflow: hidden;
  background: #2d3d50;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.center .candle {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.center .candle-flame {
  width: 15px;
  height: 30px;
  background-color: #ffad00;
  border-radius: 8px 8px 8px 8px/20px 20px 8px 8px;
  box-shadow: 0 0 20px 0 #ffad00, 0 0 40px 0 rgba(255, 173, 0, 0.6666666667), 0 0 60px 0 rgba(255, 173, 0, 0.5333333333);
  animation: flame-twirl 15s ease infinite, glow 2s ease infinite;
}
.center .candle-wick {
  height: 10px;
  width: 3px;
  background-color: #ad87a9;
}
.center .candle-wax {
  width: 40px;
  height: 110px;
  background-color: #ffffff;
  border-radius: 6px;
  box-shadow: inset -15px 0 0 -10px #d8deed;
}
.center .candle-stand {
  width: 100px;
  height: 8px;
  background-color: #1c233e;
  border-radius: 2px;
}

@keyframes flame-twirl {
  0%, 22%, 49%, 62%, 81%, 100% {
    border-radius: 2px 14px 8px 8px/20px 20px 8px 8px;
  }
  14%, 32%, 56%, 70%, 89% {
    border-radius: 14px 2px 8px 8px/20px 20px 8px 8px;
  }
}
@keyframes glow {
  0%, 30%, 60%, 80%, 100% {
    box-shadow: 0 0 20px 0 #ffad00;
  }
  20%, 50%, 70% {
    box-shadow: 0 0 20px 0 #ffad00, 0 0 40px 0 rgba(255, 173, 0, 0.6666666667), 0 0 60px 0 rgba(255, 173, 0, 0.5333333333);
  }
}